<template>
  <el-container class="muzi">
    <el-header>
      <div class="left-panel">
        <el-button type="primary" @click="onCreate">添加</el-button>
        <!--
        <el-button type="primary" @click="onOneKeyAudit">审核</el-button>
        -->

        <el-dropdown split-button type="primary" @click="onBatch" @command="onCommand">
          批量导入
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :disabled="!template">下载导入模板</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!--
        <el-button type="danger" @click="onExport" :loading="exports.loading" class="export-btn" plain>导出正常工资薪金所得</el-button>
        -->
      </div>
      <div class="right-panel">
        <el-date-picker v-model="search.ym" type="month" placeholder="薪资日期" @change="onChangeMonth"/>
        <el-select v-model="search.clienteleId" placeholder="请选择客户" @change="onClientele" style="width: 175px">
          <el-option v-for="item in filter.clienteleList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
        <el-select v-model="search.projectId" placeholder="请选择项目" @change="onProject" style="width: 175px">
          <el-option v-for="item in filter.projectList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
        <el-select v-model="search.teamId" placeholder="请选择班组" @change="onTeam" v-if="filter.teamList.length > 0" style="width: 175px">
          <el-option v-for="item in filter.teamList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>

        <div class="right-panel-search">
          <el-input v-model="search.keyword" placeholder="请输入关键字" class="tax-search-name" @blur="onSearch()" clearable/>
          <el-button type="primary" icon="el-icon-search" @click="onSearch()"/>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table :data="pager.dataList" border table-layout="auto" v-loading="pager.loading" ref="TableHandle" @selection-change="onSelection">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="clientele" label="客户名称" align="center"/>
        <el-table-column prop="project" label="项目名称" align="center"/>
        <el-table-column prop="team" label="班组名称" align="center"/>
        <el-table-column prop="name" label="姓名" align="center">
          <template #default="scope">
            <el-popover placement="right" @show="onMultiple(scope.row)" :width="400" trigger="click" v-if="scope.row.multiple">
              <template #reference>
                <el-badge is-dot title="点击查看重复薪资" :offset="[2, 1]">{{ scope.row.name }}</el-badge>
              </template>
              <el-table :data="multipleList">
                <el-table-column width="150" label="客户" property="clientele"/>
                <el-table-column width="100" label="项目" property="project"/>
                <el-table-column width="300" label="班组" property="team"/>
              </el-table>
            </el-popover>
            <div v-else>{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="identity" label="证件号码" align="center" width="150"/>
        <el-table-column label="日期" align="center">
          <template #default="scope">{{scope.row.year}}年{{scope.row.month}}月</template>
        </el-table-column>
        <el-table-column prop="total" label="本期收入" align="center"/>
        <el-table-column prop="tax" label="本月个税" align="center"/>
        <el-table-column prop="endowment" label="养老保险" align="center"/>
        <el-table-column prop="medical" label="医疗保险" align="center"/>
        <el-table-column prop="unemployment" label="失业保险" align="center"/>
        <el-table-column prop="accumulation" label="住房公积金" align="center"/>
        <el-table-column prop="children" label="子女教育" align="center"/>
        <el-table-column prop="continuing" label="继续教育" align="center"/>
        <el-table-column prop="elderly" label="赡养老人费" align="center"/>
        <el-table-column prop="rent" label="住房租金" align="center"/>
        <el-table-column prop="loans" label="住房贷款利息" align="center"/>
        <el-table-column prop="other" label="其它" align="center"/>
        <el-table-column prop="taxAdjust" label="个税调整" align="center"/>
        <!--
        <el-table-column prop="audit" label="审核状态" align="center" :formatter="formatterAudit"/>
        -->
        <el-table-column fixed="right" label="操作" width="145" align="center">
          <template #default="scope">
            <el-button type="primary" icon="el-icon-edit" :disabled="scope.row.audit === '02'" circle @click="onEdit(scope.row)"/>
            <el-button type="danger" icon="el-icon-delete" :disabled="scope.row.audit === '02'" circle @click="onDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="operating" :gutter="5">
        <el-col :span="6" class="pager">
          <el-pagination layout="prev, pager, next" :total="pager.total" @current-change="onSearch"/>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  <BatchForm v-if="show.batch" ref="BatchHandle" @success="onSearch" @closed="show.batch=false"/>
</template>

<script>
/**
 * 页面施工中
 * @author Yufe
 * @version 1.0
 */
import BatchForm from '@/views/salary/batch'

import {audit} from "@/data/salary";
import {type} from '@/data/employee'
import {dayjs} from "element-plus";

export default {
  name: '项目资料',
  components: {BatchForm},
  data() {
    return {
      exports: {
        loading: false
      },
      type,
      show: {
        batch: false,
      },
      total: 0,
      ids: [],
      dataList: [],
      search: {
        keyword: '',
        clienteleId: '',
        projectId: '',
        teamId: '',
        reset: function () {
          this.teamId = '';
          this.projectId = '';
        }
      },
      filter: {
        teamList: [],
        projectList: [],
        clienteleList: []
      },
      operating: {
        loading: false
      },
      pager: {
        total: 0,
        dataList: [],
        loading: false,
        clean: function () {
          this.total = 0;
          this.dataList.length = 0;
        },
        fill: function ({total, dataList}) {
          this.total = total;
          this.dataList = dataList;
        }
      },
      template: false,
      multipleList: [],
    }
  },
  mounted() {
    this.onSearch();
    if ((this.template = localStorage['salary-template-url']) === undefined) {
      this.$API.salary.template.get().then(res => {
        if (res.success) {
          this.template = res.data.url;
          localStorage['salary-template-url'] = res.data.url
        }
      })
    }

    // 初始化客户列表
    this.$API.clientele.list.get().then(res => {
      if (res.success) this.filter.clienteleList = res.data;
    })
  },
  computed: {},
  methods: {
    onSearch(number = 1) {
      this.pager.loading = true;
      this.$API.salary.pager.get({...this.search, number}).then(res => {
        if (res.success) {
          this.pager.fill(res.data)
        }
      }).finally(() => {
        this.pager.loading = false
      })
    },
    onCreate() {
      this.$router.push({name: "salary-form"})
    },
    onBatch() {
      this.show.batch = true
      this.$nextTick(() => {
        this.$refs.BatchHandle.open()
      })
    },
    onEdit(row) {
      this.$router.push({name: "salary-form", query: {id: row.id}})
    },
    onDelete(row) {
      this.$API.salary.detail.delete(row.id).then(res => {
        if (res.success) this.onSearch()
      })
    },
    onCommand() {
      window.open(this.template, "_blank");
    },
    sum(salary) {
      const {endowment, medical, unemployment, accumulation, children, continuing, elderly, rent, loans, other} = salary;
      return Object.values({endowment, medical, unemployment, accumulation, children, continuing, elderly, rent, loans, other})
          .reduce((accumulator, currentValue) => accumulator + this.toNumber(currentValue), 0)
    },
    toNumber(value) {
      try {
        return Number(value)
      } catch (err) {
        return 0;
      }
    },
    formatterAudit(row, column, value) {
      return audit.find(ele => ele.value === value).label;
    },
    onClientele(value) {
      this.search.reset()
      this.$API.project.list.get({id: value}).then(res => {
        if (res.success) {
          this.filter.projectList = res.data;
          if (this.filter.projectList.length === 0) {
            this.$message.warning("该客户还没有项目");
            this.filter.projectList.length = 0
            this.filter.teamList = 0;
          }
        }
      });
    },
    onProject(value) {
      const current = this.filter.projectList.find(ele => ele.id === value);
      if (current.teamList.length > 0) {
        this.filter.teamList = current.teamList;
      } else this.filter.teamList = 0;
    },
    onTeam() {
      this.active = 2;
    },
    onSelection(values) {
      this.ids = values.map(ele => ele.id);
    },
    onMultiple(row) {
      this.multipleList = Array.of();
      const {identity, year, month} = row;
      this.$API.salary.multiple.post({identity, year, month}).then(res => {
        if (res.success) {
          this.multipleList = res.data;
        }
      })
    },
    onChangeMonth(value) {
      const date = dayjs(value)
      this.search.year = date.year();
      this.search.month = date.month() + 1;
    },
  }
}
</script>

<style lang="less" scoped>
.muzi {
  .left-panel {
    .export-btn {
      margin-left: 5px;
    }
  }

  .operating {
    padding: 15px 10px;

    .el-button--large {
      width: 50%;
    }
  }
}
</style>
